<template>
    <div>
        <el-table ref="table" :data="data" :height="height" v-loading="loading" @selection-change="selectionChange" @row-dblclick="rowDblclick">
            <template v-for="item in column">
                <el-table-column v-if="item.type == 'selection'" type="selection" :align="item.align ? item.align :'center'" :width="item.width ? item.width :'55'"/>
                <el-table-column v-else-if="item.type == 'input'" :align="item.align ? item.align :'center'" :width="item.width ? item.width :''" :prop="item.prop ? item.prop :''" :label="item.label ? item.label :''">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row[item.prop]" :disabled="item.disabled" style="width: 100%"></el-input>
                    </template>
                </el-table-column>
                <el-table-column v-else :align="item.align ? item.align :'center'" :width="item.width ? item.width :''" :prop="item.prop ? item.prop :''" :label="item.label ? item.label :''" show-overflow-tooltip/>
            </template>
        </el-table>
    </div>
</template>
<script>
  export default {
    props: ['data', 'height', 'loading', 'column'],
    data() {
      return {};
    },
    mounted() {
      //console.log('exportVisibleDefault', this.exportVisibleDefault);
    },
    methods: {
      clearSelection() {
        this.$refs.table.clearSelection(); //清空表单勾选
      },
      toggleRowSelection(datas) {
        setTimeout(() => {
          if (datas) {
            datas.forEach(data => {
              this.$refs.table.toggleRowSelection(data);
            });
          }
          this.$emit('clearIsLockSave');
        }, 100);
      },
      selectionChange(val) {
        this.$emit('selectionChange', val);
      },
      rowDblclick(row, column, event) {
        this.$emit('rowDblclick', row, column, event);
      }
    }
  };
</script>
<style scoped>
</style>
